<template>
    <div class="innerContainer">
        <common-title>
            <template #expand>
            </template>
        </common-title>
        <div class="innerPane">
            <div class="filterArea">
                <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                    <el-form-item label="日志分类">
                        <el-select v-model="searchForm.logCategory" placeholder="请选择日志分类" @change="handleChange">
                            <el-option v-for="item in categorys" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item> 
                    <el-form-item>
                        <el-button plain type="primary" @click="search">查询</el-button>
                        <el-button plain @click="onClear">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="tableData" border row-key="id" style="width: 100%;  " row-class-name="fixed-row"
                :cell-style="{ textAlign: 'center' }">
                <el-table-column type="index" width="50" label="序号" />
                <el-table-column header-align="center" prop="logAccount" label="登录账号" width="120" />
                <el-table-column header-align="center" prop="logCategory" label="日志类型" width="180">
                    <template #default="scope">
                        {{ categorys.find(item => item.value === scope.row.logCategory)?.label || scope.row.logCategory }} 
                    </template>
                </el-table-column>
                <el-table-column header-align="center" prop="logContent" label="日志内容"/>
                 
          
                <el-table-column header-align="center" prop="logTime" label="日志时间" width="180" /> 
            </el-table>
            <!-- 分页 -->
            <el-pagination class="pagination" :current-page="searchForm.current" :page-size="searchForm.size"
                :page-sizes="[10, 50, 100, 200]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>

</template>

<script lang="js" setup>

import CommonTitle from "@/components/CommonTitle.vue";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElTree, ElButton, ElMessageBox } from "element-plus";

import { reqLogList } from "@/utils/requests";

const router = useRouter();


let total = ref(0);
// 用户数据
let tableData = ref([]);

let categorys = ref([
    { value: 'login', label: '登录日志' }, 
    { value: 'data.center', label: '数据中心' }, 
    { value: 'client.task', label: '监测数据' }, 
]);


// 搜索条件
const searchForm = reactive({
    current: 1,
    size: 10,
    logCategory: null,
});


// Dom 挂载之后
onMounted(async () => {
    search();
});

const handleChange = (val) => {
    searchForm.logCategory = val;
    search();
};

const onClear = () => {
    searchForm.isSync = null;
    searchForm.startDate = '';
    searchForm.endDate = '';
    search();
};

const handleSizeChange = (size) => {
    searchForm.size = size;
    searchForm.current = 1;
    search();
};
const handleCurrentChange = (current) => {
    searchForm.current = current;
    search();
};

const search = () => {
    reqLogList(searchForm).then((res) => {
        tableData.value = res.records;
        total.value = res.total;
    });
};
</script>

<style lang="scss"></style>
